<template>
	<view>
		<view class="logout">
			<u-button
				type="error"
				:text="title"
				plain
				@click="onPopupShow"
			></u-button>
		</view>
		<u-popup
			:show="showLogout"
			mode="bottom"
			:closeable="true"
			@close="onPopupClose"
		>
			<view class="popup">
				<view class="tips">
					<text class="text">{{ text }}</text>
				</view>
				<view class="button">
					<u-button
						type="error"
						text="确定退出"
						@click="handleLogout"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'UserLogout',
	props: {
		// 按钮名称
		title: {
			type: String,
			default: '退出系统',
		},
	},
	data() {
		return {
			text: '',
			showLogout: false,
		}
	},
	methods: {
		// 显示退出弹窗
		onPopupShow() {
			if (this.$store.getters.isOnline) {
				this.text = '确定退出登录吗？'
			} else {
				this.text = '您当前未联网，退出后可能无法登录'
			}
			uni.hideTabBar()
			setTimeout(() => {
				this.showLogout = true
			}, 0)
		},
		// 隐藏退出弹窗
		onPopupClose() {
			this.showLogout = false
			setTimeout(() => {
				uni.showTabBar()
			}, 300)
		},
		// 退出登录
		async handleLogout() {
			uni.showLoading({
				title: '请稍候',
			})
			this.$store.dispatch('userLogout')
			//await this.$store.dispatch('closeDatabase')
			uni.showTabBar()
			uni.reLaunch({
				url: '/pages/login/login?logout=1',
			})
			uni.hideLoading()
		},
	},
}
</script>

<style lang="scss" scoped>
.logout {
	padding: 30px 20px;
}

.popup {
	text-align: center;
	padding: 20px 20px 30px;

	.tips {
		margin: 20px 0 30px;

		.text {
			font-size: 17px;
			text-align: center;
		}
	}

	.button {
		margin-top: 20px;
	}
}
</style>
